<template>
    <div class="ratingselect">
        <div class="rating-type border-1px">
            <span class="block positive" @click="select(2,$event)" :class="{ 'active':selectType===2 }">{{ desc.all }} <span class="count">{{ratings.length}}</span>
            </span>
            <span class="block positive"  @click="select(0,$event)" :class="{ 'active':selectType===0 }"> {{ desc.positive }}<span class="count">{{ positives.length }}</span></span>
            <span class="block negative"  @click="select(1,$event)" :class="{ 'active':selectType===1 }"> {{ desc.negative }}<span class="count">{{ negatives.length }}</span></span>
        </div>
        <div class="switch" :class="{'on':onlyContent}">
            <span class="iconfont icon-check_circle"  :class="{'on': onlyContent}" @click="toggleContent($event)">&#xe630;</span>
            <span class="text">只看有内容的评价</span>
        </div>
    </div>
</template>

<script>
    import {eventBus} from '../../components/event-bus.js';
    const POSITIVE = 0 ;
    const NEGATIVE = 1 ;
    const ALL = 2;
    export default {
        name: "ratingselect",
        data(){
          return{}
        },
        computed:{
            positives(){
                return this.ratings.filter( (rating) =>{
                    return rating.rateType == POSITIVE;
                })
            },
            negatives(){
                return  this.ratings.filter( (rating)=>{
                    return rating.rateType == NEGATIVE;
                } )
            }
        },
        methods:{
            select(type,event){
                if(!event._constructed){
                    return;
                }
                this.$emit('selecttype',type);
            },
            toggleContent(event){
                if(!event._constructed){
                    return;
                }
                this.$emit('content')
            }
        },
        props:{
            selectType:{
                type:Number,
                default:ALL
            },
            ratings:{
                type:Array,
                default(){
                    return [];
                }
            },
            onlyContent:{
                type:Boolean,
            default:false
            },
            desc:{
                type:Object,
                default(){
                    return{
                        all:'全部',
                        positive:'满意',
                        negative:'不满意'
                    }
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~../../stylus/index.styl'
    .ratingselect
     .rating-type
      padding:18px 0
      margin: 0 18px
      border-1px(rgba(7,17,27,0.1))
      font-size:0
      .block
       display:inline-block
       padding:8px 12px
       margin-right:8px
       border-radius:1px
       font-size:12px
       color:rgb(77,85,93)
       &.active
         color:#fff
       .count
         margin-left:2px
         font-size:8px
       &.positive
         background:rgba(0,160,220,0.2)
         &.active
           background:rgb(0,160,220)
       &.negative
         background:rgba(77,85,93,0.2)
         &.active
           background:rgb(77,85,93)
     .switch
      padding:12px 18px
      line-height:24px
      border-bottom:1px solid rgba(7,17,27,0.1)
      color:rgb(147,153,159)
      font-size:0
      &.on
        .icon-check_circle
         color:#00c850
      .icon-check_circle
        display:inline-block
        vertical-align:top
        font-size:24px
        margin-right:4px
      .text
        display:inline-block
        vertical-align:top
        font-size:12px
</style>